/*
 * @Descripttion: 检查任务页面
 * @version: 
 * @Author: linPing
 * @Date: 2019-10-29 12:25:00
 * @LastEditTime: 2019-11-04 15:47:30
 */



import React, { Fragment } from 'react';

import { observer, inject } from 'mobx-react';
import NavigationBar from '../../common/NavigationBar';
import GlobalStyles from "../../res/styles/GlobalStyles";
import { ButtonGroup } from 'react-native-elements'
import FlatListComponent from '../../common/FlatList'
import NavigationUtil from '../../navigator/NavigationUtil'
import ViewUtil from "../../util/ViewUtil";
import SafeAreaViewPlus from "../../common/SafeAreaViewPlus";
import VisibleView from "../../common/VisibleView";
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    TouchableOpacity,
    Button,
    View,
    Text,
    FlatList,
    RefreshControl,
    StatusBar,
} from 'react-native';

// import { TouchableOpacity } from 'react-native-gesture-handler';

const LIST_GROUP = {
    inspectionRecord: 'inspectionRecord',
    rectificationRecord: 'rectificationRecord',
}


@inject('appStore')
@observer
export default class TaskDetailPage extends React.Component {
    constructor(props) {
        super(props)
        this.title = "任务详情"
        this.params = this.props.navigation.state.params
        this.originalData = this.params.item
        this.state = {
            isLoading: false, //下拉刷新loading
            loadMore:false, //是否还有数据
            hideMore:true, //是否隐藏分页
            data: this.originalData.building
        }

    }
 

    _renderItem(data) {
        const { item } = data

        return <TouchableOpacity
                    onPress={() => {
                        NavigationUtil.goPage({ item}, "TaskRoomList")
                    }}

                >
            <View style={[styles.itemBox]}>
                <View style={styles.row}>
                    <Text style={styles.title}>{item.title}</Text>
                    {data.item.status === 0 && <Text style={[styles.itemText, GlobalStyles.status.warning]}>未完成</Text>}
                    {data.item.status === 1 && <Text style={[styles.itemText, GlobalStyles.status.success]}>已完成</Text>}
                </View>
                <View style={styles.row}>
                    <View style={styles.rowItem}>
                        <Text style={[styles.itemText, GlobalStyles.marginRight10]}>房间检查进度</Text>
                        <Text style={styles.itemText}>{item.completeTotal}/{item.roomTotal}</Text>
                    </View>
                </View>
                <View style={GlobalStyles.line} />
            </View>

        </TouchableOpacity>
    }


       /*
     *@Description: 加载数据
     *@param: refreshing {true:"下拉刷新",false:'上拉加载'}
     *@return: 
    */
    loadData(refreshing) {
        if (refreshing) {//下拉刷新
            this.setState({
                isLoading: true
            })
            setTimeout(()=>{ //模拟回掉
                this.setState({
                    isLoading: false
                })

            },1000)
        } else { //加载分页
            // this.setState({
            //     data: this.state.data.concat(this.state.data)
            // })
            this._onLoadMore()
        }
    }

    _onLoadMore(pageIndex) {
    
        this.setState({
            data: this.state.data.concat(originalData.items)
        })
    }
    onBack = () => {
        NavigationUtil.goBack(this.props.navigation);
    }


    render() {
        const { navigation } = this.props
        const { appStore, appStore: { theme } } = this.props

        let statusBar = {
            backgroundColor: theme,
            barStyle: 'light-content',
        };
        let navigationBar =
            <NavigationBar
                title={this.title}
                statusBar={statusBar}
                leftButton={ViewUtil.getLeftBackButton(() => this.onBack())}
                style={{ backgroundColor: theme }}
            />;

        const item = this.originalData

        return (
       
            <SafeAreaViewPlus style={GlobalStyles.root_container}>
                {navigationBar}
                <ScrollView>
                <View style={[styles.header_container]}>
                    <View style={styles.row}>
                        <Text style={styles.title}>{item.title}</Text>
                        {item.status === 0 && <Text style={[styles.itemText, GlobalStyles.status.warning]}>未完成</Text>}
                        {item.status === 1 && <Text style={[styles.itemText, GlobalStyles.status.success]}>已完成</Text>}
                    </View>
                    <View style={GlobalStyles.line} />
                    <View style={styles.info}>
                        <View style={styles.row}>
                            <View style={styles.rowItem}>
                                <Text style={[styles.itemLabel, GlobalStyles.marginRight10]}>包含楼宇数</Text>
                                <Text style={styles.itemText}>{item.building.length}</Text>
                            </View>
                            <View style={styles.rowItem}>
                                <Text style={[styles.itemLabel, GlobalStyles.marginRight10]}>创建日期</Text>
                                <Text style={styles.itemText}>{item.createDate}</Text>
                            </View>
                        </View>
                        <View style={styles.row}>
                            <View style={styles.rowItem}>
                                <Text style={[styles.itemLabel, GlobalStyles.marginRight10]}>房间检查进度</Text>
                                <Text style={styles.itemText}>{item.completeTotal}/{item.roomTotal}</Text>
                            </View>
                            <View style={styles.rowItem}>
                                <Text style={[styles.itemLabel, GlobalStyles.marginRight10]}>创建者</Text>
                                <Text style={styles.itemText}>{item.authorName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Text>
                            </View>
                        </View>

                        <View style={styles.row}>
                            <View style={styles.rowItem}>
                                <Text style={[styles.itemLabel, GlobalStyles.marginRight10]}>督察员</Text>
                                <Text style={styles.itemText}>{item.supervision}</Text>
                            </View>

                        </View>
                        <View style={styles.row}>

                            <View style={styles.rowItem}>
                                <Text style={[styles.itemLabel, GlobalStyles.marginRight10]}>备注</Text>
                                <Text style={[styles.itemText,styles.textArea]}>{item.remark}</Text>
                            </View>
                        </View>

                    </View>


                </View>

                <View style={styles.list_container}>
                    <View style={styles.list_title}>
                        <Text>楼宇列表</Text>
                    </View>

                    <FlatList
                    data={this.state.data}
                    renderItem={data => this._renderItem(data)}
                    
                />

                </View>

                </ScrollView>
            </SafeAreaViewPlus>

        
        )
    }

};

const styles = StyleSheet.create({

    container: {
        flex: 1
    },
    header_container: {
        padding: 20,
        backgroundColor: '#fff',
        marginBottom: 20
    },
    info: { paddingTop: 20 },
    itemBox: {

        paddingVertical: 2,
        backgroundColor: '#fff',
        marginBottom: 10,

    },
    title: {
        color: "#333",
       
    },
    row: {
      
        alignItems: 'center',
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: 10
    },
    itemText: {
        fontSize: 12,
        color: "#666",
      
    },
    textArea:{
        flex:1,
    
      
     
    },
    desc: {
        fontSize: 11,
        color: "#aaa"
    },
    rowItem: {
        flex:1,
        flexDirection: "row",
    },
    list_container: {
        backgroundColor:"#fff",
        padding: 20,
        paddingBottom: 0,

    },
    list_title: {
       
        backgroundColor: '#fff',
        marginBottom: 20,
    },
    itemLabel: {
        
        fontSize: 12,
        color: "#aaa"
    }


});

